<template>
  <div class="mod-gs">
    <div class="hd">
      经营数据表
      <select v-model="current">
        <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
      </select>
    </div>
    <div class="bd">
      <table v-if="tableData" class="table">
        <tbody>
          <tr>
            <td>类目</td>
            <td>金额</td>
            <td>比增</td>
          </tr>
          <tr>
            <td>营业收入（万元）</td>
            <td>{{ tableData.businessIncome }}</td>
            <td>{{ tableData.businessIncomeRatioIncrease }}</td>
          </tr>
          <tr>
            <td>总成本（万元）</td>
            <td>{{ tableData.totalCost }}</td>
            <td>{{ tableData.totalCostRatioIncrease }}</td>
          </tr>
          <tr>
            <td>其中：营业成本（万元）</td>
            <td>{{ tableData.businessCost }}</td>
            <td>{{ tableData.businessCostRatioIncrease }}</td>
          </tr>
          <tr>
            <td>研发费用（万元）</td>
            <td>{{ tableData.developmentCost }}</td>
            <td>{{ tableData.developmentCostRatioIncrease }}</td>
          </tr>
          <tr>
            <td>人力资源成本（万元）</td>
            <td>{{ tableData.humanResourceCost }}</td>
            <td>{{ tableData.humanResourceCostRatioIncrease }}</td>
          </tr>
          <tr>
            <td>营业利润（万元）</td>
            <td>{{ tableData.operatingProfit }}</td>
            <td>{{ tableData.operatingProfitRatioIncrease }}</td>
          </tr>
          <tr>
            <td>净利润（万元）</td>
            <td>{{ tableData.netProfit }}</td>
            <td>{{ tableData.netProfitRatioIncrease }}</td>
          </tr>
          <tr>
            <td>利润总额（万元）</td>
            <td>{{ tableData.totalProfit }}</td>
            <td>{{ tableData.totalProfitRatioIncrease }}</td>
          </tr>
          <tr>
            <td>应交税费（万元）</td>
            <td>{{ tableData.taxPayable }}</td>
            <td>{{ tableData.taxPayableRatioIncrease }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { computed, ref, watch } from "@vue/composition-api";

export default {
  props: {
    data: {
      type: Array
    }
  },
  setup(props) {
    const { data } = props;

    const years = computed(() => _.map(data, "year"));

    const current = ref();

    const tableData = ref();

    watch(
      years,
      () => {
        current.value = _.first(years.value);
      },
      {
        immediate: true
      }
    );

    watch(
      current,
      () => {
        tableData.value = _.find(data, { year: current.value });
      },
      {
        immediate: true
      }
    );

    return {
      years,
      current,
      tableData
    };
  }
};
</script>

<style scoped></style>
